import {ActionType, ProColumns, ProTable,} from '@ant-design/pro-components';
import {Divider, Image, Popconfirm, Space, Typography} from 'antd';
import React, {useRef, useState} from 'react';
import UpdateModal from './components/UpdateModal';
import message from "antd/es/message";
import {getGoodsSearch,deleteGoods} from "@/services/Admin/goodsManage";

export const waitTimePromise = async (time: number = 100) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(true);
    }, time);
  });
};

/**
 * 商品管理页面
 * @constructor
 */
const AdminGoodsPage: React.FC<unknown> = () => {
  const [updateModalVisible, setUpdateModalVisible] = useState<boolean>(false);
  // @ts-ignore
  const [updateData, setUpdateData] = useState<Admin.GoodsResult>({});
  // @ts-ignore
  const [data, setData] = useState<Admin.PageQueryVO<Admin.GoodsResult>>({});
  const actionRef = useRef<ActionType>();



  /**
   * 表格列配置
   */
  const columns: ProColumns<Admin.GoodsResult>[] = [
    {
      dataIndex: 'id',
      valueType: 'indexBorder',
      width: 48,
    },
    {
      title:'图片',
      dataIndex:'goodsImage',
      search: false,
      width: 48,
      render:(_,record)=>(<Image src={record.goodsImage}/>)
    },
    {
      title: '商品名称',
      dataIndex: 'goodsName',
    },
    {
      title: '发布人',
      dataIndex: 'username',
      search: false,
    },
    {
      title: '商品类型',
      dataIndex: 'typeName',
      search: false,
    },
    {
      title: '价格',
      dataIndex: 'price',
      search: false,
    },
    {
      title: '商品状态',
      dataIndex: 'goodsStatus',
      valueType: 'select',
      valueEnum: {
        0: {
          text: '下架',
        },
        1: {
          text: '启用',
        },
        2: {
          text: '出售',
        }
      }
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      valueType: 'dateTime',
      search: false,
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      render: (_, record) => (
        <Space split={<Divider type="vertical" />}>
          <Typography.Link
            onClick={() => {
              setUpdateData(record);
              setUpdateModalVisible(true);
            }}
          >
            修改
          </Typography.Link>
          <Popconfirm
            title="您确定要删除么？"
            onConfirm={() => {
              deleteGoods(record.id).then(message.success("删除成功"));
              actionRef.current?.reload();
            }}
            okText="确认"
            cancelText="取消"
          >
            <Typography.Link type="danger">删除</Typography.Link>
          </Popconfirm>
        </Space>
      ),
    },
  ];


  return (
    <>
      <ProTable<Admin.GoodsResult>
        headerTitle="商品管理"
        actionRef={actionRef}
        rowKey="id"
        search={{
          labelWidth: 'auto',
        }}
        pagination={
          {
            pageSize:8,
            total:data.total
          }
        }
        request={async (params, sorter, filter) => {
          console.log(params)
          const res=await getGoodsSearch({...params} as Admin.GoodsQueryParams);
          res.list.map((item)=>{
            // @ts-ignore
            item.createTime=new Date(item.createTime[0],item.createTime[1],item.createTime[2],item.createTime[3],item.createTime[4],item.createTime[5]);
          })
          setData(res);
          return {
            data:res.list||[]
          };
        }}
        columns={columns}
      />
      <UpdateModal
        oldData={updateData}
        modalVisible={updateModalVisible}
        onSubmit={async () => {
          await waitTimePromise(500);
          setUpdateModalVisible(false);
          actionRef.current?.reload();
        }}
        onCancel={() => setUpdateModalVisible(false)}
        />
    </>
  );
};

export default AdminGoodsPage;
